<template>
  <div class="site-massage">
    <div class="massagelist long">
      <div class="title">{{ titleH2 }}</div>
      <div class="site-list" v-show="isTableShow">
        <div class="message-title">
          <div
            v-for="(item, index) in messageTitle1"
            :key="index"
            :style="'width:' + (index === 2 ? 30 : 17) + '%'"
          >
            <i></i><span>{{ item }}</span>
          </div>
        </div>
        <div class="message-list">
          <div
            class="item"
            :class="isclickmessage1 && maeeageindex1 === index ? 'actives' : ''"
            v-for="(item, index) in messageList1"
            :key="index"
            v-if="index < 1000"
            @click="message1click(index, item)"
            @mouseenter="enterTooltip1(index)"
            @mouseleave="leaveTooltip1"
          >
            <div
              :class="
                tooltipIndex1 === index
                  ? tooltipIndex1 > 1
                    ? 'opentooltip1'
                    : 'opentooltip2'
                  : ''
              "
            >
              {{ item.enterpriseName }}
            </div>
            <span style="width: 25%">{{ item.enterpriseName }}</span>
            <span style="width: 25%">{{ item.message1 }}</span>
            <span style="width: 25%">{{ item.message2 }}</span>
            <span style="width: 25%">{{ item.message3 }}</span>
            <i class="el-icon-warning"></i>
          </div>
        </div>
      </div>

      <div class="site-list" v-show="!isTableShow">
        <div class="message-title">
          <div
            v-for="(item, index) in messageTitle2"
            :key="index"
            :style="'width:' + (index === 2 ? 30 : 17) + '%'"
          >
            <i></i><span>{{ item }}</span>
          </div>
        </div>
        <div class="message-list">
          <div
            class="item"
            :class="isclickmessage2 && maeeageindex2 === index ? 'actives' : ''"
            v-for="(item, index) in messageList2"
            :key="index"
            v-if="index < 1000"
            @click="message2click(index, item)"
            @mouseenter="enterTooltip2(index)"
            @mouseleave="leaveTooltip2"
          >
            <div
              :class="
                tooltipIndex2 === index
                  ? tooltipIndex2 > 1
                    ? 'opentooltip1'
                    : 'opentooltip2'
                  : ''
              "
            >
              {{ item.enterpriseName }}
            </div>
            <span style="width: 17%">{{ item.enterpriseName }}</span>
            <span style="width: 17%">{{ item.message1 }}</span>
            <span style="width: 30%">{{ item.message2 }}</span>
            <span style="width: 17%">{{ item.message3 }}</span>
            <span style="width: 17%">{{ item.message4 }}</span>
            <i class="el-icon-warning"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="massagelist long">
      <div class="title">告警信息</div>
      <div class="site-list">
        <div class="message-title">
          <div
            v-for="(item, index) in messageTitle4"
            :key="index"
            :class="index === 0 ? 'w20' : 'w70'"
          >
            <i></i><span>{{ item }}</span>
          </div>
        </div>
        <div class="message-list">
          <div
            class="item"
            :class="isclickmessage4 && maeeageindex4 === index ? 'actives' : ''"
            v-for="(item, index) in messageList4"
            :key="index"
            @click="message4click(index, item)"
          >
            <span style="width: 20%; text-align: center">{{
              item.enterpriseName
            }}</span>
            <span style="width: 70%; text-align: left">{{
              item.message1
            }}</span>
            <i class="el-icon-warning"></i>
          </div>
        </div>
      </div>
    </div>
    <MyDialog
      :isShow="isShowMyDialog"
      :dataList="MyDiaList"
      @DiaClose="isShowMyDiaClose"
    >
    </MyDialog>
  </div>
</template>

<script>
import {
  getYcCheckSite,
  getMjVehicleLocationOnline,
  getAlarmRecordOnline,
  getAlarmOnline,
} from "@/api/largescreen";
import AlertList from "@/components/AlertList";
import MyDialog from "@/components/MyDialog/index";
import { mapMutations, mapState } from "vuex";
export default {
  name: "SiteMassage",
  components: {
    AlertList,
    MyDialog,
  },
  computed: {
    ...mapState(["map", "pointDetectionPage"]),
    Mapadcode() {
      return this.map.adcode;
    },
    PageIsActive() {
      return this.pointDetectionPage.isActive;
    },
  },
  data() {
    return {
      /*记录提示信息的下标*/
      tooltipIndex1: -1,
      tooltipIndex2: -1,
      /*第一块title*/
      titleH2: "",
      isTableShow: true,
      /*第一块Table的title 遥测/门禁 */
      messageTitle1: ["站点信息", "车辆数", "重型货车数量", "重型货车占比"],
      messageTitle2: ["企业名称","门站名称","进出时间","车牌号码","排放阶段",
      ],
      /*第一块Table 遥测/门禁 数据列表*/
      messageList1: [],
      messageList2: [],
      maeeageindex1: 0,
      maeeageindex2: 0,
      isclickmessage1: false,
      isclickmessage2: false,
      /*第一块Table的title 遥测/门禁*/
      messageTitle4: ["车牌号", "告警描述"],
      /*告警组件数据列表*/
      messageList4: [],
      maeeageindex4: 0,
      isclickmessage4: false,
      /*弹窗*/
      isShowMyDialog: false,
      MyDiaList: {},
    };
  },
  watch: {
    PageIsActive: {
      deep: true,
      immediate: true,
      handler(newval, old) {
        this.maeeageindex1 = -1;
        this.maeeageindex2 = -1;
        this.maeeageindex4 = -1;
        this.messageList1 = [];
        this.messageList2 = [];
        this.messageList4 = [];
        if (newval === "遥测门站") {
          this.GetYcCheckSite(this.Mapadcode);
          this.GetAlarmOnline();
          this.titleH2 = "站点信息";
          this.isTableShow = true;
        } else {
          this.GetMjVehicleLocationOnline(this.Mapadcode);
          this.GetAlarmRecordOnline();
          this.titleH2 = "实时进出记录";
          this.isTableShow = false;
        }
      },
    },
    Mapadcode: {
      deep: true,
      immediate: true,
      handler(newval, old) {
        if (this.PageIsActive === "企业门禁") {
          this.GetMjVehicleLocationOnline(newval);
        }else if(this.PageIsActive === "遥测门站"){
          this.GetYcCheckSite(newval);
        }
      },
    },
  },
  mounted() {},
  methods: {
    ...mapMutations("map", ["SET_SEARCH"]),
    /*遥测门站站点信息*/
    GetYcCheckSite(id) {
      let cId = "";
      id !== 120000 ? (cId = id) : (cId = "");
      getYcCheckSite({ cId: cId,})
        .then((res) => {
          let data = res.data;
          let arry = [];
          for (let v of data) {
            let obj = {};
            obj.siteId = v.siteId;
            obj.enterpriseName = v.siteName;
            obj.message1 = v.vehicleNum;
            obj.message2 = v.hgvNum;
            obj.message3 = v.hgvRatio;
            obj.Id = v.siteId;
            arry.push(obj);
            for (let v in data) {
              if (data[v].longitude === null && data[v].longitude === null) {
                data.splice(v, 1);
              }
            }
          }
          this.messageList1 = arry;
        }) 
        .catch((err) => {
          console.log(err);
        });
    },
    message1click(index, data) {
      this.isclickmessage1 = true;
      this.maeeageindex1 = index;
      this.isShowMyDialog = true;
      this.MyDiaList = data;
    },
    enterTooltip1(index) {
      this.tooltipIndex1 = index;
    },
    leaveTooltip1() {
      this.tooltipIndex1 = -1;
    },
    /*企业门禁站点信息*/
    GetMjVehicleLocationOnline(id) {
      let cId = "";
      id !== 120000 ? (cId = id) : (cId = "");
      getMjVehicleLocationOnline({ cId: cId })
        .then((res) => {
          let data = res.data;
          let arry = [];
          for (let v of data) {
            let obj = {};
            obj.enterpriseName = v.companyName;
            obj.message1 = v.channelName;
            obj.message2 = v.actTime;
            obj.message3 = v.plateNo;
            obj.message4 = v.standardEmission;
            arry.push(obj);
          }
          this.messageList2 = arry;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    message2click(index, data) {
      this.isclickmessage2 = true;
      this.maeeageindex2 = index;
      this.isShowMyDialog = true;
      this.MyDiaList = data;
    },
    enterTooltip2(index) {
      this.tooltipIndex2 = index;
    },
    leaveTooltip2() {
      this.tooltipIndex2 = -1;
    },
    /*遥测门站告警信息*/
    GetAlarmOnline() {
      getAlarmOnline()
        .then((res) => {
          // console.log(res.data)
          let data = res.data;
          let arr = [];
          for (let k in data) {
            let obj = {};
            obj.enterpriseName = k;
            obj.message1 = data[k];
            arr.push(obj);
          }
          this.messageList4 = arr;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /*企业门禁告警信息*/
    GetAlarmRecordOnline() {
      getAlarmRecordOnline()
        .then((res) => {
          let data = res.data;
          let arr = [];
          for (let k in data) {
            let obj = {};
            obj.enterpriseName = k;
            obj.message1 = data[k];
            arr.push(obj);
          }
          this.messageList4 = arr;
        })
        .catch();
    },
    /*告警信息点击事件*/
    message4click(index, data) {
      this.isclickmessage4 = true;
      this.maeeageindex4 = index;
      let Data = data.enterpriseName;
      let str = Data.trim();
      if (str) {
        this.SET_SEARCH({
          show: true,
          plateNo: str,
        });
      }
    },
    /*弹窗*/
    isShowMyDiaClose() {
      this.isShowMyDialog = false;
    },
  },
};
</script>

<style scoped lang="scss">
.w20 {
  width: 20%;
}
.w70 {
  width: 70%;
}
.site-massage {
  width: 546px;
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  right: 0px;
  top: 0px;
  box-sizing: border-box;
  padding-left: 10px;
  .massagelist {
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 28px;
    .title {
      color: #f0f6fb;
      margin-bottom: 23px;
      font-size: 16px;
    }
    .site-list {
      width: 100%;
      flex: 1;
      overflow: hidden;
    }
  }
  .long {
    .message-title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      height: 15px;
      margin-bottom: 12px;
      box-sizing: border-box;
      padding-right: 45px;
      div {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 15px;
        i {
          width: 8px;
          height: 8px;
          background: #ff6d00;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 10px;
        }
        span {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 15px;
          font-weight: bold;
          color: #7983a2;
          line-height: 15px;
        }
        /*&:nth-child(1){
          width: 65px;
        }
        &:nth-child(2){
          width: 100px;
        }*/
      }
    }
    .message-list {
      width: 100%;
      height: calc(100% - 15px - 12px);
      box-sizing: border-box;
      padding-right: 8px;
      overflow-x: hidden;
      overflow-y: auto;
      .item {
        width: 100%;
        height: 33px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        box-sizing: border-box;
        position: relative;
        padding-right: 30px;
        cursor: pointer;
        span {
          font-size: 13px;
          color: #7983a2;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          &:nth-child(n + 2) {
            text-align: center;
          }
        }
        i {
          position: absolute;
          right: 7px;
          width: 15px;
          height: 15px;
          color: #7983a2;
        }
        div {
          display: none;
          z-index: 10;
        }
        .opentooltip1 {
          display: flex;
          align-items: center;
          position: absolute;
          top: -42px;
          left: 0px;
          background: #353539;
          width: 100%;
          height: 40px;
          color: #fff;
          font-size: 13px;
          box-sizing: border-box;
          padding: 0px 10px;
          border-radius: 8px;
          &::after {
            position: absolute;
            content: "";
            width: 0px;
            height: 0px;
            border-style: solid;
            border-color: transparent;
            border-width: 6px;
            border-top-width: 6px;
            border-top-color: #353539;
            display: block;
            bottom: -12px;
            margin-left: -6px;
            left: 50%;
          }
        }
        .opentooltip2 {
          display: flex;
          align-items: center;
          position: absolute;
          top: 42px;
          left: 0px;
          background: #353539;
          width: 100%;
          height: 40px;
          color: #fff;
          font-size: 13px;
          box-sizing: border-box;
          padding: 0px 10px;
          border-radius: 8px;
          &::after {
            position: absolute;
            content: "";
            width: 0px;
            height: 0px;
            border-style: solid;
            border-color: transparent;
            border-width: 6px;
            border-bottom-width: 6px;
            border-bottom-color: #353539;
            display: block;
            top: -12px;
            margin-left: -6px;
            left: 50%;
          }
        }
      }
      .actives {
        background-color: #b35b0d3d;
        span {
          color: #edf2f9;
        }
        i {
          color: #ffffff;
        }
      }
    }
    /*定义滚动条高宽及背景*/
    .message-list::-webkit-scrollbar {
      display: block;
      width: 10px;
      background-color: transparent;
    }
    /*定义滚动条轨道 */
    .message-list::-webkit-scrollbar-track {
      background: url("~@/assets/images/scroll-bg.png") repeat-y top center;
      border-radius: 3px;
    }
    /*定义滑块 */
    .message-list::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background: linear-gradient(0deg, #015eea 0%, #00c0fa 100%);
    }
  }
}
</style>
